<template>
  <a-modal
      v-model:visible="bindVisible"
      :title="$t('batchUnregisterTaskModal.batchUnregister')"
      :cancelText="$t('operation.cancel')"
      :okText="$t('operation.confirm')"
      @ok="confirm"
  >
    <a-form layout="vertical">
      <a-form-item :label="$t('batchUnregisterTaskModal.project')">
        <a-select :placeholder="$t('operation.defaultAll')" v-model:value="props.form.projectId"
                  allow-clear>
          <a-select-option v-for="item in props.projects" :key="item.projectId">{{ item.projectName }}</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
    <a-form layout="vertical">
      <a-form-item :label="$t('batchUnregisterTaskModal.mockHandler')">
        <a-select :placeholder="$t('operation.defaultAll')" v-model:value="props.form.handlerId"
                  :disabled="!props.form.projectId" allow-clear>
          <a-select-option v-for="item in props.handlers" :key="item.handlerId">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
    <a-form layout="vertical">
      <a-form-item :label="$t('batchUnregisterTaskModal.interrupt')">
        <a-select :placeholder="$t('operation.select')" v-model:value="props.form.interrupt" :defaultValue="false">
          <a-select-option :key="true">{{ $t('operation.yes') }}</a-select-option>
          <a-select-option :key="false">{{ $t('operation.no') }}</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import {PropType} from 'vue'
import {UnregisterForm} from "@/store/runningTask";

const props = defineProps({
  form: {type: Object as PropType<UnregisterForm>, default: () => ({})},
  projects: {type: Object , default: () => ({})},
  projectIdHandlerInfoMap: {type: Object , default: () => ({})},
  handlers: {type: Object , default: () => ({})},
  visible: {type: Boolean, default: false},
})
const emit = defineEmits(['update:visible', 'ok'])
const bindVisible = ref(false)
watchEffect(() => (bindVisible.value = props.visible))
watchEffect(() => emit('update:visible', bindVisible.value))

const confirm = async () => {
  await request.post('/api/dynamic-mock/mock/task/running/unregister/batch', props.form)
  bindVisible.value = false
  emit('ok')
}

</script>
